import React, { PureComponent } from 'react'
import { Input, Form, Tree } from 'antd'
import menuList from '../../config/menuConfig'
import PropTypes from 'prop-types';

const { TreeNode } = Tree;

export default class AutForm extends PureComponent {

    // 声明接收父组件传递的role渲染到界面中
    static propsTypes = {
        singleRole: PropTypes.object
    }

    state={
        checkedKeys:[]
    }

    // 点击 TreeNode 时，CheckBox发生改变
    onCheck = checkedKeys => {
        // console.log('onCheck', checkedKeys);
        this.setState({ checkedKeys });
      };

    //   渲染整棵Tree树
    getTreeNode = (menuList) => {
        return menuList.map((item) => {
            return (
                <TreeNode title={item.title} key={item.key}>
                    {item.children ? this.getTreeNode(item.children) : null}
                </TreeNode>
            )
        })
    }

    // 将自身的checkedKeys传递给父组件然后更新
    getNewTree=()=>this.state.checkedKeys
   
    UNSAFE_componentWillMount() {
        this.TreeNode = this.getTreeNode(menuList)
        // 根据传入角色的menus生成初始状态
        const {menus} = this.props.singleRole
        this.setState({
            checkedKeys: menus
        })
    }

    /*
    根据新传入的role来更新checkedKeys状态
    当组件接收到新的属性时自动调用，第一次不会调用该函数，且在render之前调用这个函数
    */
    UNSAFE_componentWillReceiveProps(nextProps){
        // 从 role 中拿出数据加到state的menu中,不能直接改变state中的menu，需要另外定义一个来接收
        // console.log('UNSAFE_componentWillReceiveProps',nextProps)
        const menu = nextProps.singleRole.menus
        this.setState({checkedKeys:menu})
    }

    render() {
        return (
            <div>
                <Form.Item label="角色名称" labelCol={{ span: 4 }} wrapperCol={{ span: 15 }} >
                    <Input value={this.props.roleName} disabled />
                </Form.Item>
                <Tree
                    checkable
                    defaultExpandAll={true}
                    checkedKeys={this.state.checkedKeys}
                    onCheck={this.onCheck}
                >
                    <TreeNode title="平台权限" key="0-0">
                        {this.TreeNode}
                    </TreeNode>
                </Tree>
            </div>
        )
    }
}

/**
 * Tree 的配置参数：
 * defaultExpandAll：默认展开所有的节点
 * checkedKeys：左侧选中显示勾选
 * 
 * 不能直接修改role中的值，如果直接修改又点击取消会出现问题
 * 
 * 树形Tree 的 checkedKeys 是根据默认值来显示的，如果没有变化，那么点击其他可选按钮是不能选择的，因为值没有发送改变，不可选
 * 
 * 此时可以定义一个state，通过改变state的值来动态显示checkedKeys，
 * 
 * 出现的bug：全部角色都出现第一个角色的权限
 * 原因：是因为点击的第一个是直接从state中读取的，在willMount中只会调用一次，如果想要第一次在state中读取，后面的会修改，应该使用UNSAFE_componentWillReceiveProps方法【该方法在第一次不会调用且在render之前就调用】   UNSAFE_componentWillReceiveProps需要传入nextProps然后进行修改
 * 
 * UNSAFE_componentWillReceiveProps(nextProps){
        // 从 role 中拿出数据加到state的menu中,不能直接改变state中的menu，需要另外定义一个来接收
        // console.log('UNSAFE_componentWillReceiveProps',nextProps)
        const menu = nextProps.singleRole.menus
        this.setState({checkedKeys:menu})
    }
 * 
 * 
 * 
 * 子组件将数据传给父组件,需要定义一个方法
 * 父组件通过使用ref来接收子组件传递的数据
 * 
 * 子组件方法：getNewTree=()=>this.state.checkedKeys
 * 父组件调用：
 * 1. 创建一个容器 
 *  constructor(){
         super()
         this.treeRef = React.createRef()
     }
 * 2. 接收 <AutForm singleRole={this.state.role} ref={this.treeRef}/>
 * 
 * 3. 使用（直接获取函数的值getNewTree()）
 * role.menus = this.treeRef.current.getNewTree()
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 */
// import React, {PureComponent} from 'react'
// import PropTypes from 'prop-types'
// import {
//   Form,
//   Input,
//   Tree
// } from 'antd'
// import menuList from '../../config/menuConfig'

// const Item = Form.Item

// const { TreeNode } = Tree;

// /*
// 添加分类的form组件
//  */
// export default class AuthForm extends PureComponent {

//   static propTypes = {
//     role: PropTypes.object
//   }

//   constructor (props) {
//     super(props)

//     // 根据传入角色的menus生成初始状态
//     const {menus} = this.props.role
//     this.state = {
//       checkedKeys: menus
//     }
//   }

//   /*
//   为父组件提交获取最新menus数据的方法
//    */
//   getMenus = () => this.state.checkedKeys


//   getTreeNodes = (menuList) => {
//     return menuList.reduce((pre, item) => {
//       pre.push(
//         <TreeNode title={item.title} key={item.key}>
//           {item.children ? this.getTreeNodes(item.children) : null}
//         </TreeNode>
//       )
//       return pre
//     }, [])
//   }

//   // 选中某个node时的回调
//   onCheck = checkedKeys => {
//     console.log('onCheck', checkedKeys);
//     this.setState({ checkedKeys });
//   };


//   componentWillMount () {
//     console.log(this.state.checkedKeys)
//     this.treeNodes = this.getTreeNodes(menuList)
//   }

//   // 根据新传入的role来更新checkedKeys状态
//   /*
//   当组件接收到新的属性时自动调用
//    */
//   componentWillReceiveProps (nextProps) {
//     console.log('componentWillReceiveProps()', nextProps)
//     const menus = nextProps.role.menus
//     this.setState({
//       checkedKeys: menus
//     })
//     // this.state.checkedKeys = menus
//   }

//   render() {
//     const {role} = this.props
//     const {checkedKeys} = this.state
//     // 指定Item布局的配置对象
//     const formItemLayout = {
//       labelCol: { span: 4 },  // 左侧label的宽度
//       wrapperCol: { span: 15 }, // 右侧包裹的宽度
//     }

//     return (
//       <div>
//         <Item label='角色名称' {...formItemLayout}>
//           <Input value={role.name} disabled/>
//         </Item>

//         <Tree
//           checkable
//           defaultExpandAll={true}
//           checkedKeys={checkedKeys}
//           onCheck={this.onCheck}
//         >
//           <TreeNode title="平台权限" key="all">
//             {this.treeNodes}
//           </TreeNode>
//         </Tree>
//       </div>
//     )
//   }
// }